<template>
    <div class="colmun-detail-page w-75 mx-auto">
        <div class="colmun-info row mb-4 border-bottom pb-4 aligin-items-centter">
            <div class="col-3 text-center">
                <img :src="colmun.avatar?.url" alt="" class="rounded-circle border">
            </div>
            <div class="col-9">
                <h4>{{ colmun.title }}</h4>
            </div>
        </div>
        <PostList :list="list"></PostList>
    </div>
</template>

<script lang="ts">
import { defineComponent, computed, onMounted } from 'vue'
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router';
import PostList from '@/components/PostList.vue';
export default defineComponent({
    components:{
        PostList
    },
    setup () {
        const route = useRoute()
        const store = useStore()
        const currenId = route.params.id
        
        onMounted(() => {
            store.dispatch('fetchColmun', currenId)
            store.dispatch('fetchPosts', currenId)
        })
        const colmun = computed(() => store.getters.getColmunById(currenId))
        const list = computed(() => store.getters.getPostById(currenId))
        console.log(list);
        
        return {
            colmun,
            list
        }
    }
})
</script>

<style scoped>

</style>